<template>
	<view class="mainpadding">
		<!-- //弹出层 -->
		<u-modal :show="show" :title="title" confirmColor="#DCB490" :showCancelButton='true' @confirm="confirm"
			@cancel="show=false"></u-modal>
		<view class="metopbox flexleft" v-if="!is_login" @click="thelogin">
			<view class="weituxiang">
				<image :src="userinfo.avatar" mode=""></image>
			</view>
			<view class="bigtext">未登录，点击登录</view>
		</view>
		<view class="metopbox flexleft" v-if="is_login">
			<view class="tuxiang">
				<image :src="info.avatar" mode=""></image>
			</view>
			<view class="toprt">
				<view class="bigtext">{{info.nickname}} </view>
				<view class="day">坚持天数：{{info.tm_day}}天</view>
				<!-- <view class="xuexi" v-show="info.user_package.expire_time">
					刷题截止时间：{{info.user_package.expire_time | formatDate('-')}}</view> -->
			</view>
		</view>
		<view class="dingdanbox radius mainpadding margin_top" v-if="flag">
			<view class="alltext">我的订单</view>
			<view class="mainpadding flexbetween">
				<view class="shouhuo" @click="jumpurl(0)">
					<view class="shouhimg">
						<image src="../../static/image/system/daifahuo.png" mode=""></image>
					</view>
					<view class="samtext">待发货</view>
				</view>
				<view class="shouhuo" @click="jumpurl(1)">
					<view class="shouhimg">
						<image src="../../static/image/system/daishouhuo.png" mode=""></image>
					</view>
					<view class="samtext">待收货</view>
				</view>
				<view class="shouhuo" @click="jumpurl(2)">
					<view class="shouhimg">
						<image src="../../static/image/system/yishouhuo.png" mode=""></image>
					</view>
					<view class="samtext">已完成</view>
				</view>
				<view class="shouhuo" @click="jumpurl(3)">
					<view class="shouhimg">
						<image src="../../static/image/system/dingdan.png" mode=""></image>
					</view>
					<view class="samtext">全部订单</view>
				</view>
			</view>
		</view>
		<!-- <view class=" margin_top mainpadding ffffff xinxibox radius">
			<view class="flexbetween" @click="shuatitime">
				<view class="alltext">刷题时间</view>
				//<view class="righticon" v-show="!flagshuati"></view>
				//<view class="xiaicon" v-show="flagshuati"></view>  
				<view :class="rotate?'xiarotate':'rightrotate'"></view>
			</view>
			<view class="timebox" v-show="flagshuati">
				<view class="flexbetween margin_top1" v-for="item in datelist" :key="item.id">
					<view class="kemu">{{item.category.name}}</view>
					<view class="datestime">{{item.expire_time_text}}</view>
				</view>
			</view>
		</view> -->
		<view class=" margin_top mainpadding ffffff xinxibox radius">
			<!-- <view class="lianxi flexbetween mainpadding2" @click="phone(info.customer_mobile)">
				<view class="flexleft">
					<view class="xinxiicon">
						<image src="../../static/image/system/kefu.png" mode=""></image>
					</view>
					<view class="alltext">联系客服</view>
				</view>
				<view class="dianhua" v-if="is_login">{{info.customer_mobile}}</view>
			</view> -->
			<view class="lianxi flexbetween mainpadding2" @click="show_friend=true">
				<view class="flexleft">
					<view class="xinxiicon">
						<image src="../../static/image/system/kefu.png" mode=""></image>
					</view>
					<view class="alltext">联系我们</view>
				</view>
				<view class="righticon"></view>
			</view>
			<view class=" lianxi flexbetween mainpadding" @click="jumpfk">
				<view class="flexleft">
					<view class="xinxiicon">
						<image src="../../static/image/system/yijianfk.png" mode=""></image>
					</view>
					<view class="alltext">意见反馈</view>
				</view>
				<view class="righticon"></view>
			</view>
			<!-- <view class=" flexbetween yijian" @click="kdzj">
				<view class="flexleft">
					<view class="xinxiicon">
						<image src="../../static/image/system/tongji.png" mode=""></image>
					</view>
					<view class="alltext">考点总结</view>
				</view>
				<view class="righticon"></view>
			</view> -->
			<view class=" flexbetween yijian" @click="jihuo">
				<view class="flexleft">
					<view class="xinxiicon">
						<image src="/static/image/erkai/dun.png" mode=""></image>
					</view>
					<view class="alltext">激活码</view>
				</view>
				<view class="righticon"></view>
			</view>
		</view>
		<view class="tuiku mainpadding " v-if="is_login" @click="showModal">退出登录</view>
		<u-popup :show="shows" mode="center" round="20" bgColor="#f7f0e8" closeOnClickOverlay="true"
			@close="shows=false">
			<view class="wai">
				<view class="nei">
					<view class="flexcolumn">
						<view class="activate">激活码</view>
						<view class="inp">
							<input type="text" placeholder="请输入激活码" class="input" v-model="cardnum">
						</view>
						<view class="liji" @click="activate">立即激活</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_friend" mode="center" round="20" closeOnClickOverlay="true" @close="show_friend=false">
			<view class=" ">
				<image src="/static/image/erkai/yaoqing.png" mode="" class="img"></image>
				<view class="erwie" :style="{backgroundImage: `url(${kefuInfo.kefu})`}" @click="saveImage"></view>
				<view class="ke">客服：{{kefuInfo.kefuname}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				show_friend: false, //客服弹窗
				flagshuati: false,
				title: '是否退出登录！',
				show: false,
				info: {
					user_package: {
						expire_time: ""
					}
				},
				is_login: false,
				versionnum: "",
				flag: false, //发布版本false线上版本true
				datelist: [],
				rotate: false,
				cardnum: "", //激活码
				kefuInfo: {}, //客服信息
			}
		},
		onLoad() {
			const accountinfo = wx.getAccountInfoSync()
			this.versionnum = accountinfo.miniProgram.version
			this.getversion()
			this.getKefu()
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.getinform()
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			}
		},
		methods: {
			saveImage() {
				var i = [this.kefuInfo.kefu]; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: 1, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			jihuo() {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.shows = true
			},
			activate() { //激活
				httpRequest.request('/api/user/jihuoad', 'POST', {
					cardnum: this.cardnum,
				}).then(res => {
					httpRequest.toast(res.msg)
					this.shows = false
					this.cardnum = ""
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			shuatitime() {
				this.flagshuati = !this.flagshuati
				this.rotate = !this.rotate
			},
			getversion() {
				httpRequest.request('/api/common/version', 'POST', {
					version: "1.1.0"
				}).then(res => {
					this.flag = !res.data.boolean
					// console.log(this.flag,999)
				})
			},
			//获取用户信息
			getinform() {
				httpRequest.request('/api/user/index', 'POST', {
					package_id: this.listid
				}).then(resp => {
					resp.data.userinfo.avatar = this.$imgUrl + resp.data.userinfo.avatar
					this.info = resp.data.userinfo
					// this.datelist = resp.data.userinfo.user_package
				})
			},
			//获取客服
			getKefu() {
				httpRequest.request('/api/banner/kefu', 'POST', {}).then(res => {
					res.data.kefu = this.$imgUrl + res.data.kefu
					this.kefuInfo = res.data
					console.log(this.kefuInfo)
				})
			},
			// 登录
			thelogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			jumpurl(index) {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages/mypage/daifahuo?msg=" + index
				})
			},
			// 联系客服
			phone(p) {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			jumpfk() {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages/mypage/yijianfk"
				})
			},
			showModal() {
				this.show = true;
			},
			confirm() {
				this.show = false;
				// 将存储的数据改为空达到退出登录的效果
				uni.setStorageSync('token', "");
				uni.setStorageSync('user_id', "");
				httpRequest.toast("退出登录成功")
				this.is_login = false
			},
			kdzj() {
				uni.navigateTo({
					url: "/pages/homepage/kaodianzj"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ke {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: center;
		padding-bottom: 56rpx;
	}

	.erwie {
		width: 433rpx;
		height: 433rpx;
		background-color: #DCB490;
		background-size: 100%;
		margin: 46rpx 112rpx;
	}

	.img {
		width: 658rpx;
		height: 237rpx;
	}

	.inp {
		padding: 64rpx 37rpx;
	}

	.liji {
		padding: 21rpx 140rpx;
		border-radius: 85rpx 85rpx 85rpx 85rpx;
		background-color: rgba(220, 180, 144, 1);
		color: #fff;
		margin-bottom: 59rpx;
	}

	.input {
		background-color: #f9ead4;
		padding: 34rpx 70rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;
	}

	.nei {
		margin: 14rpx 16rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 1rpx solid #DCB490;
	}

	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.activate {
		padding: 36rpx 232rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #452708;
	}

	.day {
		font-size: 22rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #DCB490;
		margin-top: 20rpx;
	}

	.kemu {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.datestime {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.timebox {
		padding: 20rpx 30rpx 30rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #F6F6F6;
	}

	.margin_top1:first-child {
		margin-top: 0;
	}

	.margin_top1 {
		margin-top: 10rpx;
	}

	.tuiku {
		box-sizing: border-box;
		display: flex;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		justify-content: center;
		align-items: center;
		width: 100%;
		background: RGBA(239, 239, 239, 1);
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.0500);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 190rpx;
	}

	.yijian {
		padding: 30rpx 30rpx 0;
	}

	.xinxibox {
		box-shadow: 0px 0px 15px 0px rgba(51, 51, 51, 0.0500);
	}

	.dianhua {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-decoration: underline;
		color: #FF3939;
		text-decoration: underline #FF3939;
	}

	.xinxiicon {
		width: 34rpx;
		height: 32rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.lianxi {
		border-bottom: 1px solid #EBEBEB;
		;
	}

	.shouhimg {
		width: 42rpx;
		height: 42rpx;
		margin: auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.samtext {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-align: center;
		color: #333333;
	}

	.alltext {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}

	.dingdanbox {
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.0500);
	}

	.xuexi {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #DCB490;
		margin-top: 42rpx;
	}

	.weituxiang {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 29rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.tuxiang {
		width: 158rpx;
		height: 158rpx;
		border-radius: 50%;
		margin-right: 29rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.bigtext {
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.righticon {
		width: 13rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/righticon.png");
		background-size: 100% 100%;
	}

	.xiaicon {
		width: 24rpx;
		height: 13rpx;
		background-image: url("@/static/image/system/xia.png");
		background-size: 100% 100%;
	}

	.xiarotate {
		transform: rotate(90deg);
		transition: all .5s;
		width: 13rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/righticon.png");
		background-size: 100% 100%;
	}

	.rightrotate {
		// transform:rotate(-90deg);
		transition: all .5s;
		width: 13rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/righticon.png");
		background-size: 100% 100%;
	}
</style>